window.onload = function(){
       //获取HTML中的元素
       var timeDiv = getElement("time");
       var fraction = getElement("fraction");
       var wolfsInPit = getElement("wolfsInPit");
       var startBtn = getElement("startBtn");
       var restartBtn = getElement("restartBtn");
       var pause = getElement("pause");
       var end = getElement("end");
       //游戏状态
       var gameState = 0;
       //分数
       var fractionNum = 0;
       //定时控制器
       var timer = null;
       //狼出现的控制器
       var showWolfTimer = null;
      //获取时间条的宽度
       var timeWidth = timeDiv.offsetWidth;
      //上一头狼出现的坑的编号
      var lastWolfPit = 0;
      //规定坑的位置
       var pitPostions = [{
		l: "098px",
		t: "115px"
	}, {
		l: "017px",
		t: "160px"
	}, {
		l: "015px",
		t: "221px"
	}, {
		l: "030px",
		t: "294px"
	}, {
		l: "122px",
		t: "274px"
	}, {
		l: "207px",
		t: "296px"
	}, {
		l: "200px",
		t: "212px"
	}, {
		l: "187px",
		t: "142px"
	}, {
		l: "100px",
		t: "192px"
	}];
       /*
        1、点击开始按钮
            开始按钮消失
            计时条开始计时
            暂停要出现
            狼来了
        * */
       startBtn.onclick = function(){
       	//js中设置元素的样式要用 元素对象名.style.属性名
       	startBtn.style.display = "none";
       	pause.style.display = "block";
       	timeDecrease();
       	wolfsComing();
       	gameState = 1;
       }
       /*
           通过js中setInterval(arg1,arg2) arg1 方法对象 arg2 时间间隔
           每时间间隔arg2 执行方法arg1
           计算时间就是在相应的时长内减少时间条的宽度，当时间条的宽度减少到零时，计时结束
           规定每200毫秒 时间条减少1px
           游戏的总时间 = 时间条的宽度/5  180px/5
           用定时器实现，创建定时器（成员变量）
        * */
       
       function timeDecrease(){
       	timer = setInterval(timeDown,200);
       }
       /* 获取时间条的长度
        * 让时间长度减一
        * 判断是否游戏结束
        * 给时间条元素宽度赋值
        */
       function timeDown(){
       	timeWidth--;
       	if(timeWidth<0){
       	     gameOver();
       	}
       	timeDiv.style.width = timeWidth +"px";
       }
       /*
         规定每500毫秒出现一头狼，把控制狼出现的定时器设为全局变量，方便游戏的控制（不论停止，重新开始都要控制狼的出现）
         wolfsComing 控制出现多只狼
         showWolf 只负责一只狼的出现
        * */
       
       function wolfsComing(){
       	showWolfTimer = setInterval(showWolf,500);
       }
       /*
         出现一头狼的方法
         （1）狼是一个img元素，通过js动态向HTML添加一个元素
         （2）狼的身份：大狼，要打，小狼，放过，控制大狼出的比小狼多而且是随机的
                js中对象的属性无需声明直接用
                三目运算符 表达式？值1：值2 含义表达式成立吗 ，如果成立运算结果值1，不成立就是值2
         （3）确定狼出现的位置,狼绝对定位 
              一个坑中只能有一只狼（保存一下上一只狼出现的坑的编号，设成员变量）
          (4)设置狼的动作
              1、上爬出来 
              2、狼降下去   自然降下 被打击后降下
        * */
       function showWolf(){
       	//创建一头狼
       	var wolf = document.createElement("img");
       	//确定狼的身份 大狼：小狼 = 9：1
       	wolf.who = rand(0,100)>90?"x":"h";
       	wolf.style.position = "absolute";
          //确定狼的位置lastWolfPit就是一个坑
          wolf.randIndex = rand(0,pitPostions.length);
          if(lastWolfPit ==  pitPostions[wolf.randIndex]){
          	    return;
          }
          //保存坑的位置
          lastWolfPit = pitPostions[wolf.randIndex];
          //设置狼的位置
          wolf.style.top = pitPostions[wolf.randIndex].t;
          wolf.style.left = pitPostions[wolf.randIndex].l;
          //把狼放到HTML中
          wolfsInPit.appendChild(wolf);
          wolfPresent(wolf);
          wolfDissmiss(wolf);
          wolfAddBitAction(wolf);
       }
       /*狼爬出的动作是一个五张图片轮播产生的效果，先给wolf设picShowIndex
        * 五张图片轮播用setInterval，50毫秒换一张图片
        * 没播一张图片把wolf.picShowIndex ++；
        * 判断如果五张图片播完就听掉定时器
        */
       function wolfPresent(wolf){
       	wolf.picShowIndex = 0;
       	wolf.worfPresentTimer = setInterval(
       		function(){
       		    wolf.picShowIndex ++;
       		    if(wolf.picShowIndex > 5){
       		    	clearInterval(wolf.worfPresentTimer);
       		    }else{
       		    	wolf.src = "img/"+wolf.who+wolf.picShowIndex +".png";
       		    }	
       		},50
       	);
       	
       }
       /*狼进洞，先让狼在洞口观望800ms方便去打击他
        * setTimeout(funcion(){} , time)，等time时间后执行funcion
        * 狼进洞的操作也是五张图片轮播50ms换一张
        *  把狼上升的图片倒序播一遍就是下降
            当图片轮播完之后要把狼从HTML中移除
        * */
       function wolfDissmiss(wolf){
       	  wolf.delayTimer = setTimeout(function(){
       	  	wolf.dimissTimer = setInterval(function(){
       	  		wolf.picShowIndex--;
       	  		if(wolf.picShowIndex<=0){
       	  			clearInterval(wolf.dimissTimer);
       	  			if(wolf.parentNode){
       	  			    wolfsInPit.removeChild(wolf);
       	  			}
       	  		}else{
       	  	               wolf.src = "img/"+wolf.who+wolf.picShowIndex +".png";
       	  		}
       	  		
       	  	},50);
       	  },800);
       }
       /*打狼就是给wolf添加一个点击事件
        *   算分逻辑
        *   狼的观望的定时器停掉
        *   狼的进洞的定时器停掉
        *   给狼设一个点击定时器去播放被击中后的图片 五张图片轮播
        */
       function wolfAddBitAction(wolf){
       	 wolf.addEventListener("click",function(){
       	      countFraction(wolf.who);	
       	      clearTimeout(wolf.delayTimer);
       	      clearInterval(wolf.dimissTimer);
       	      wolf.picShowIndex = 5;
       	      wolf.bitTimer = setInterval(function(){
       	      	wolf.picShowIndex ++;
       	      	if(wolf.picShowIndex >8){
       	      		if(wolf.parentNode){
       	      		   wolfsInPit.removeChild(wolf);
       	      		}
       	      		clearInterval(wolf.bitTimer);
       	      	}else{
       	              wolf.src = "img/"+wolf.who+wolf.picShowIndex +".png";
       	              //给fraction赋值
       	              fraction.innerHTML = fractionNum;
       	      	}
       	      },50);
       	 });
       	 
       }
       //定义一个成员变量保存分数
       function countFraction(who){
       	 if(who == "h"){
       	 	fractionNum +=10; 
       	 }else if(who =="x"){
       	 	fractionNum -=10;
       	 }
       	 
       }
       /*
        时间进度条<0结束（定时器不用时一定要停掉）
        定时器停
        wolfComing停
        计算分数现实得分（end div显示）
        重新开始出现
        * */
       function gameOver(){
       	  setTimeout(function(){
       	  	clearInterval(timer);
       	  	clearInterval(showWolfTimer);
       	  	end.style.display = "block";
       	  	pause.style.display = "none";
       	  	end.innerHTML = "GAMEOVER<br/>您的得分是"+fractionNum;
       	  	restartBtn.style.display = "block";
       	  },1000);
       };
       /*
        * 得分板消失，replaybutton消失
        * 重置时间条的长度，重新计时
        * 分数归零
        * 狼来了
        */
       restartBtn.onclick = function(){
       	  restartBtn.style.display = "none";
       	  end.style.display = "none";
       	  pause.style.display = "block";
       	  fraction.innerHTML = 0;
       	  fractionNum = 0;
       	  timeDiv.style.width = "180px";
       	  timeWidth = timeDiv.offsetWidth;
       	  clearInterval(timer);
       	  timeDecrease();
       	  wolfsComing();
       }
       //暂停按钮
       /*
         暂停是游戏状态，如何去定游戏状态，用变量做为标示
         gameState = 0 , 1,2 0游戏初始 1正在游戏中 2游戏暂停
         设一个成员变量 gameState 
         
         暂停 暂停游戏 继续开始
        * */
       pause.onclick = function(){
       	  if(gameState == 1){
       	  	clearInterval(timer);
       	  	clearInterval(showWolfTimer);
       	  	gameState = 2;
       	  }else if(gameState == 2){
       	  	timeDecrease();
       	          wolfsComing();
       	          gameState = 1;
       	  }
       	
       }
       //随机数方法,从max和min之间产生一个随机整数Math.random()产生0~1之间
       //parseInt取整
       function rand(min,max){
       	 return  parseInt(Math.random()*(max-min) + min);
       }
       function getElement(id){
       	 return document.getElementById(id);
       }
}

























